<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>音乐播放器登录页面</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <!--<script src="js/bootstrap.min.js"></script>-->
    <script type="text/javascript"></script>
    <style>
      #body {
        background-image: url("images/3.png");
        /*background-size:100% 100%;
              background-attachment: fixed;*/
      }
    </style>
    <script>
      // 核心业务逻辑
      $(function () {
        //页面加载完之后（DOM）,自动执行这个函数

        //监测这个键，被点击之后，执行回调函数（注意这里的判断方法）
        $("#submit").click(function () {
          //拿到输入的用户名和密码
          var username = $("#user").val();
          var password = $("#password").val();

          //判断用户输入是否有问题
          if (username.trim() == "" || password.trim() == "") {
            alert("用户名或密码不能为空");
            retrun;
          }

          //能走到这里，就说明，前边是没问题的
          //ajax，类似于，键值对套键值对（个人理解）
          $.ajax({
            //请求路径
            url: "user/login",
            //参数
            data: { username: username, password: password },
            //请求类型
            type: "POST",
            //返回类型
            dataType: "json",
            //成功返回，执行的操作（方法/函数）
            success: function (retdata) {
              //data——是返回的整体，作为这个函数的参数（也可以取别的名字，如：retdata——这里改成这个吧，清晰）
              //先在控制台把返回的整体打印一下
              console.log(retdata);

              if (retdata.status == 0) {
                alert("登录成功！");
                //跳转到指定页面
                window.location.href = "list.html";
              } else {
                alert("登录失败，用户名或密码错误！");
                //既然登录失败，那就把用户刚输入的内容都清空，方便用户再次输入
                //$("#user").text("");//老师用的.value(""),用这个可以吗？试试？
                $("#user").val("");
                $("#password").val("");
              }
            },
          });
        });
      });
    </script>
  </head>
  <body id="body">
    <div
      class="container"
      style="
        width: 400px;
        margin-top: 110px;
        background-color: rgba(255, 255, 255, 0.8);
      "
    >
      <h3 style="text-align: center">音乐服务器登录界面</h3>
      <div class="form-group">
        <label for="user">用户名：</label>
        <input
          type="text"
          name="username"
          class="form-control"
          id="user"
          placeholder="请输入用户名"
        />
      </div>

      <div class="form-group">
        <label for="password">密码：</label>
        <input
          type="password"
          name="password"
          class="form-control"
          id="password"
          placeholder="请输入密码"
        />
      </div>

      <hr />
      <div class="form-group" style="text-align: center">
        <!--class="form-group"-->
        <input
          style="width: 200px; height: 40px"
          id="submit"
          class="btn btn btn-primary"
          type="button"
          value="登录"
        />
      </div>
      <!-- 出错显示的信息框 -->
      <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert">
          <span>&times;</span>
        </button>
        <!-- <strong id="message">您尚未进行登录，请您登录!</strong> -->
      </div>
    </div>
  </body>
</html>
